<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        
        <div class="layui-form-item">
            <label class="layui-form-label">用户id</label>
            <div class="layui-input-block">
                <input type="text" name="u_id" class="layui-input"  placeholder="请输入用户id" value="">
            </div>
        </div>

        <div class="layui-form-item" id="bioarea-wrap">
            <label class="layui-form-label add-width required">所属地域</label>
            <label class="layui-form-label small-width">省</label>
            <div class="layui-input-inline">
                <select style="width: 100px;" class="level-1-select" lay-filter="#bioarea-wrap1level"
                        name="province">
                    <option value="">请选择省</option>
                </select>
            </div>
            <label class="layui-form-label small-width">市</label>
            <div class="layui-input-inline">
                <select class="level-2-select" lay-filter="#bioarea-wrap2level" name="city">
                    <option value="">请选择市</option>
                </select>
            </div>
            <label class="layui-form-label small-width">区</label>
            <div class="layui-input-inline">
                <select class="level-3-select" lay-filter="#bioarea-wrap3level" name="area">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block">
                <input type="text" name="details_address" class="layui-input"  placeholder="请输入详细地址" value="">

        <div class="layui-form-item">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block">
                <textarea name="details_address" rows="20" class="layui-textarea editor" placeholder="请输入详细地址"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">经度</label>
            <div class="layui-input-block">
                <input type="text" name="longitude" class="layui-input"  placeholder="请输入经度" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">纬度</label>
            <div class="layui-input-block">
                <input type="text" name="latitude" class="layui-input"  placeholder="请输入纬度" value="">
            </div>
        </div>
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>

<script>
    layui.config({
        base: '/js/'
    }).extend({
        bioarea: 'bioarea'
    });
</script>
<script>
    layui.use(['form', 'bioarea'], function() {

        var form = layui.form
            , bioarea = layui.bioarea

        bioarea.render({
            elem: '#bioarea-wrap',
            defaultData: {
                provinceCode: '110000',
                cityCode: '110100',
                countyCode: '110113'
            },
            form
        })
        //监听提交
        form.on('submit(demo1)', function(data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });


        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function() {
            var data = form.val('example');
            console.log(data);
            alert(JSON.stringify(data));
        });

    });
</script>